<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>图鉴</title>
</head>
<script type="text/javascript" src="../static/js/paging.js"></script>
<script type="text/javascript" src="../static/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../static/js/jquery.form.js"></script>
<style type="text/css" >
    .imgHandBok{
        width: 20%;
        float: left;

    }
    .hanerUlOne{
        height: 66px;
        width: 50%;
        float: left;

        margin-top: 38px;
    }
    .hanerUlTwo{
        height: 68px;
        margin-top: 36px;
        width: 23%;
        float: left;

    }
    .imgBook{
        margin-left: 85px;
    }
    li{
        list-style: none;
    }
    .hanerUlOne>li{
        float: left;
        width: 32%;
        padding-top: 10px;
    }
    .hanerUlTwo>li{
        float: left;

    }
    #loadImg{
        float: left;
        height: 482px;
        margin-left: 8%;
        width: 42%;
        border: 2px dashed #b7b7b7;
    }
    #rightload{
        float: right;
        height: 360px;
        width: 48%;
    }
    .span_explain{
        display: block;
        margin-left: 6%;
        line-height: 43px;
    }
    #name{
        position: absolute;
        margin-left: 80%;
        width: 200px;
        top: 53px;
    }
    .file-box{
        display: inline-block;
        position: relative;
        padding: 3px 5px;
        overflow: hidden;
        width: 200px;
        margin-top: -23%;
        background-color: dodgerblue;
        height: 52px;
        cursor: pointer;
        border-radius: 11px 10px 11px 12px;
    }
    .fileInput{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;left: 0;outline: none;
        background-color: transparent;
        filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0;opacity: 0;
    }
    .subDiv{
        color: #fff;border-radius: 11px 10px 11px 12px;border: none;margin-top: -63px;width: 206px;background-color: dodgerblue;height: 61px;cursor: pointer;margin-left: 208%;
    }
    .subInput{
        font-size: 16px;margin-top: 2px;margin-left: 5px;border: none;width: 95%;height: 87%;background-color: dodgerblue;color: #fff;
    }
    th{
        border:none;
    }
    td{
        border: none;
        text-align: center;
    }
    li{
        float: left;
        width: 33.3%;
    }
    ul{
        height: 11px;
    }
    #pagination a{
        border: 1px solid #000000;
        width: 50px;
        height:20px;
        float: left;
        margin-left: 10px;cursor: pointer;
    }

</style>

<body>
<header style="height: 147px;">
    <div>
        <div id="name" ></div>
        <img id="sanjiao" style=" top: 59px;position: absolute;   left: 87%;" src="../static/img/sanjiao.png">
        <input type="hidden"  id="userName" >
        <div class="imgHandBok"><img src="../static/img/tujian.png" class="imgBook" style="width: 33%;margin-top: 37px;margin-left: 48%;"></div>
        <ul class="hanerUlOne">
            <li id="liOne"><span style="display: block; padding-left: 37%;color: blue;cursor: pointer;">付费记录</span></li>
            <li  id="liTwo"><span style="display: block;padding-left: 15%;cursor: pointer;">图鉴说明</span></li>
            <li  id="liThree"><span style="cursor: pointer;">技术支持</span></li>
        </ul>
    </div>
</header>


<div style="height: 500px;/*background-color: #f1f1f1;*/">

    <div id="fuFeiInfo" style="display: block;background-color: #fff">
      <ul>
          <li><span style="top: 23px;position: relative;padding-top: 3%;margin-left: 45%;float: left;">付费方式：</span><input type="text" style="width: 41%;margin-top: -22px;margin-left: 61%;text-indent: 20px;height: 33px;"></li>
          <li><span style="top: 39px;position: relative;margin-left: 30%;">付费金额：</span><input type="text" style="width: 41%;margin-top: 8px;margin-left: 45%;text-indent: 20px;height: 33px;"></li>
          <li><input type="button" style="    margin-top: 28px;border: none; background-color: #005cf9;margin-left: 27px;height: 39px;width: 25%;" ><span style="color: #fff;margin-left: -15%;position: relative;top: -13px;">查询</span></li>
      </ul>
      <div >
          <table id="table" style="border: 0;margin-left: 13%; width: 71%;border: 0;margin-top: 6%;">
              <tr style="background-color: #eeeeee" id="first">
                  <th>付费方式：</th>
                  <th>付费内容：</th>
                  <th>付费金额：</th>
                  <th>付费时间：</th>
              </tr>
          </table>
      </div>
        <div>
            <span id="pexv">上一页</span>
            <span id="penx">下一页</span>
            <span>每页：<span>15</span>条</span>
            <span>共计：<span id="tiaoCount"></span>条</span>
            <span>共计：<span id="pageCount"></span>页</span>
        </div>
    </div>
</div>



<div style="left: 92%;position: fixed;clear: both;top: 64%;margin-top: -18%;">
    <ul>
        <img src="../static/img/公众号.jpg" id="imgOne" style=" display: none;right: 62%; position: absolute;width: 130%;top: 7%;">
        <img src="../static/img/公众号.jpg" id="imgTwo" style="display: none;right: 62%; position: absolute;width: 130%;top: 7%;">
        <li id="iOne" style="border: 1px solid #eeeeee;width: 64px;height: 74px;"><img src="../static/img/二维码.jpg" style="margin-left: 17px;width: 27px;margin-top: 12px;"><span style="display: block; margin-left: 8px;margin-top: 4px;color:#b7b7b7;">公众号</span></li>
        <li id="iTwo" style="border: 1px solid #eeeeee;width: 64px;margin-top: -1px;height: 74px;"><img src="../static/img/timg.png" style="width: 23px;margin-left: 20px;margin-top: 10px;"><span style="display: block; margin-left: 8px;color:#b7b7b7;">移动端</span></li>
    </ul>
</div>




</div>
<div style="height: 261px;background-color: #2a2a2a;margin-top: 41%  "id="footer">
    <ul style="  height: 71px;width: 39%; margin-left: 29%;">
        <li style="width: 25%;float: left; margin-top: 36px; "><a href="http://huidd365.com/lxwm/index.jhtml" style="text-decoration:none;color: #ffffff;">联系我们</a></li>
        <li style="width: 25%;float: left; margin-top: 36px;"><a href="https://www.zhipin.com/job_detail/bf52b79bb23deb991XZ439y6EFc~.html?ka=search_list_25" style="text-decoration:none;color: #ffffff;">诚聘英才</a></li>
        <li style="width: 25%;float: left; margin-top: 36px;"><a href="http://huidd365.com/sy/index.jhtml" style="text-decoration:none;color: #ffffff;">友情链接</a></li>
        <li style="width: 25%;float: left; margin-top: 36px;"><a href="http://huidd365.com/gybr/index.jhtml" style="text-decoration:none;color: #ffffff;">关于我们</a></li>
    </ul>
    <div style="border-bottom: 1px solid #858585;"></div>
    <div style="margin-left: 39%;font-size: 18px;color: #ffffff;margin-top: 38px;"> @2018 博睿科技有限公司版权所有 </div>
    <div style="    font-size: 16px; margin-top: 20px;    padding-left:41%; color: #fff;">ICP备案号   津ICP备18009259号</div>
    <div style=" margin-left: 12%;font-size: 16px;margin-top: 20px;color: #fff;"><span style="color: #aeaeae;">标签:</span> 大数据数据采集、大数据清洗、大数据建模与算法、大数据挖掘与分析、大数据可视化、大数据产品创新设计、大数据安全、大数据运营业务。</div>
</div>
</body>
<script type="text/javascript">


    $('#person').hover(function(){
        $('#person').css('color',"#22c231");
        $('#system').css('color',"black");
        $('#line').css('margin-left',"58%");
        $('#personsPan').css('display','block');
        $('#repose').css('display','block');
        $('#person_div').css('display','block');
        $('#systemPan').css('display','none');
        $('#courseDiv').css('display','none');
        $('#resultDivS').css('display','block');
        $('#resultDiv').css('display','none');
        $("#imgType").val("人工服务");
        $("#sdButton").css("display","block");
        $("#sdButton").val("专家鉴定");
        $('#form1').css('display','block');
        $("#systemResultS").css("display","block");
        $("#systemResult").css("display","none");
    })
    $('#system').hover(function(){
        $('#system').css('color',"#22c231");
        $('#person').css('color',"black");
        $('#repose').css('display','none');
        $('#line').css('margin-left','0%');
        $('#personsPan').css('display','none');
        $('#person_div').css('display','none');
        $('#systemPan').css('display','block');
        $('#courseDiv').css('display','block');
        $('#resultDivS').css('display','none');
        $('#resultDiv').css('display','block');
        $("#sdButton").val("系统鉴定");
        $("#imgType").val("系统服务");
        $('#form1').css('display','block');
        $("#systemResultS").css("display","none");
        $("#systemResult").css("display","block");
    });
</script>
<script type="text/javascript">
  $(function () {
      var pageIndex=1;
       var count=0;
      var html='';
      var tel = sessionStorage.getItem('name');
      var mtel = tel.substr(0, 3) + '****' + tel.substr(7);
      $("#name").html(mtel);
      $("#userName").val(sessionStorage.getItem('name'));
      $.ajax({
          async:true,
          type:"POST",
          url:"/selectRechange",
          dataType:"json",
          data:{
              userName:$("#userName").val(),
              pageIndex:pageIndex
          },
          success:function (datas) {
              console.log(datas);
              count=datas.count;
              $("#pageCount").html(Math.ceil(count/15));
              $("#tiaoCount").html(count);
              $.each(datas.list,function (n,value) {
                  html+='<tr>' +
                      '<td>'+value.rechargeContext+'</td>' +
                      '<td>'+value.payContext+'</td>'+
                      '<td>'+value.payNum+'</td>'+
                      '<td>'+value.data+'</td>'+
                      '</tr>';
              });
              $("#table").append(html);
              $("table tr:even").css("background-color","#eeeeee");
          }
      });
      //上一页
      $("#pexv").click(function () {
          $("table tr:not(#first)").remove();
          pageIndex-=1;//初始页为0 也就是第一页
          var pageSize = Math.ceil(count/15);//总共多少页
          console.log(pageSize+"pageSize");
          console.log(count+"count");
          if(pageIndex<1){
              pageIndex=1;
          }
          console.log(pageIndex);
          var Onehtml='';
          var Twohtml='';
          var Threehtml='';
          var Fouhtml='';
          var html='';
          $.ajax({
              async:true,
              type:"POST",
              url:"/selectRechange",
              dataType:"json",
              data:{
                  userName:$("#userName").val(),
                  pageIndex:pageIndex
              },
              success:function (datas) {
                  console.log(datas);
                  $.each(datas.list,function (n,value) {
                      html+='<tr>' +
                          '<td>'+value.rechargeContext+'</td>' +
                          '<td>'+value.payContext+'</td>'+
                          '<td>'+value.payNum+'</td>'+
                          '<td>'+value.data+'</td>'+
                          '</tr>';
                  });
                  $("#table").append(html);
                  $("table tr:even").css("background-color","#eeeeee");
              }
          });
      });
      //下一页
          $("#penx").click(function () {
              $("table tr:not(#first)").remove();
              pageIndex+=1;//初始页为0 也就是第一页
              var pageSize = Math.ceil(count/15);//总共多少页
              console.log(pageSize+"pageSize");
              console.log(count+"count");
              if(pageIndex>pageSize||pageIndex==pageSize){
                  pageIndex=pageSize;
              }
              console.log(pageIndex);
              var Onehtml='';
              var Twohtml='';
              var Threehtml='';
              var Fouhtml='';
              var html='';
              $.ajax({
                  async:true,
                  type:"POST",
                  url:"/selectRechange",
                  dataType:"json",
                  data:{
                      userName:$("#userName").val(),
                      pageIndex:pageIndex
                  },
                  success:function (datas) {
                      console.log(datas);
                      $.each(datas.list,function (n,value) {
                          html+='<tr>' +
                              '<td>'+value.rechargeContext+'</td>' +
                              '<td>'+value.payContext+'</td>'+
                              '<td>'+value.payNum+'</td>'+
                              '<td>'+value.data+'</td>'+
                              '</tr>';
                      });
                      $("#table").append(html);
                     $("table tr:even").css("background-color","#eeeeee");
                  }
              });
          });
  })
</script>
</html>